<template>
  <div>
    <!-- 查询条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="部门名称">
        <el-input
          v-model="formInline.departName"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="部门类型">
        <el-select
          v-model="formInline.departTypeId"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in departType"
            :key="item.departTypeId"
            :label="item.departTypeName"
            :value="item.departTypeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="部门状态">
        <el-select
          v-model="formInline.departState"
          placeholder="请选择"
          clearable
        >
          <el-option :label="'使用'" :value="true">使用</el-option>
          <el-option :label="'停用'" :value="false">停用</el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="danger" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表显示 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>

      <el-table-column
        prop="departCode"
        label="部门编号"
        width="200"
        align="center"
      />

      <el-table-column
        prop="departName"
        label="部门名称"
        width="100"
        align="center"
      />

      <el-table-column prop="departTypeName" label="部门类型" align="center" />

      <el-table-column prop="departRank" label="级别" align="center" />

      <el-table-column label="部门状态" align="center">
        <template #default="scope">
          <span v-if="scope.row.departState == true">使用</span>
          <span v-if="scope.row.departState == false">停用</span>
        </template>
      </el-table-column>

      <el-table-column prop="staffName" label="负责人" align="center" />

      <el-table-column prop="createBy" label="创建人" align="center" />

      <el-table-column label="创建时间" width="200" align="center">
        <template #default="scope">
          <span v-if="scope.row.createDate != null">{{
            scope.row.createDate.replace("T", " ").substr(0, 19)
          }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="updateBy" label="修改人" align="center" />

      <el-table-column label="修改时间" width="200" align="center">
        <template #default="scope">
          <span v-if="scope.row.updateDate != null">{{
            scope.row.updateDate.replace("T", " ").substr(0, 19)
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作列" fixed="right" width="150" align="center">
        <template #default>
          <el-button link type="primary" @click="upd()">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[15, 30, 45, 60]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts" setup>
import axios from "axios";
import { useRouter } from "vue-router";

const router = useRouter();

//查询条件
const formInline = reactive({
  departName: "",
  departTypeId: "",
  departState: "",
});

//部门类型
const departType = ref();

//部门信息
const tableData = ref();

//分页
const currentPage = ref(1);
const pageSize = ref(15);
const totalCount = ref();

//获取部门类型
const getDepartType = () => {
  axios.get("Readroute/api/DepartType/GetAllDepartTypes").then((res) => {
    departType.value = res.data;
  });
};

//获取部门信息
const getDepartment = () => {
  axios
    .get("Readroute/api/Department/GetAllDepartment", {
      params: {
        departName: formInline.departName,
        DepartTypeId: formInline.departTypeId,
        DepartState: formInline.departState,
        pageIndex: currentPage.value,
        pageSize: pageSize.value,
      },
    })
    .then((res) => {
      //console.log(res.data.datas);
      tableData.value = res.data.datas;
      totalCount.value = res.data.totalCount;
    });
};

//页容量改变
const handleSizeChange = (val: number) => {
  //console.log(`${val} items per page`)
  pageSize.value = val;
  getDepartment();
};
//页序号改变
const handleCurrentChange = (val: number) => {
  //console.log(`current page: ${val}`)
  currentPage.value = val;
  getDepartment();
};

//查询
const onSubmit = () => {
  currentPage.value = 1;
  getDepartment();
};

//跳转页面
const upd = () => {
  router.push("/src/views/Organization/DepartmentView.vue");
};

onMounted(() => {
  getDepartType();
  getDepartment();
});
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>